<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="front-common :: commonCss(~{::title},~{},~{::script},~{::style})">
    <title>JAVA课程在线考试</title>
    <script th:src="@{/echarts/echarts.min.js}"></script>
    <style type="text/css">
        .container{
            display: flex;
            justify-content: center;
            align-items: flex-start;
            border: #f8f8f8 30px solid;
            padding: 0;
        }
        .content{
            background-color: #ffffff;
            float: right;
            min-height: 75vh;
            width: 100%;
        }
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">

    <div th:replace="front-common::header('grade')"></div>

    <div class="layui-layout-body" style="margin-top: 50px;background-color: #f8f8f8;">
        <div class="layui-container container">
            <div th:replace="front-common::gradeSide('analysis')"></div>
            <div class="content">
                <div class="layui-fluid" >
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                        <legend>成绩分析</legend>
                    </fieldset>

                    <div class="layui-card" >
                        <div class="layui-panel">
                            <div id="analysisGradeChart" style="max-width: 100%;height:400px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div th:replace="front-common::footer"></div>
    </div>

</div>

<script th:inline="javascript">
    var myCompanyChart;

    initCompanyChart();
    function initCompanyChart() {
        $.ajax({
            url: '/chart/gradeAnalysis',
            type: 'get',
            dataType: 'json',
            success:function (data){
                var analysisGradeChart = document.getElementById('analysisGradeChart');
                myCompanyChart = echarts.init(analysisGradeChart);
                var chartOption;

                chartOption = {
                    title:{
                        text:'成绩分析曲线'
                    },
                    tooltip:{
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        data: data.data.dateList
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name:'分数',
                            data: data.data.scoreList,
                            type: 'line',
                            symbolSize:8,
                            itemStyle:{
                                normal:{
                                    label : {
                                        show: true
                                    }
                                }
                            }

                        }
                    ]
                };
                myCompanyChart.setOption(chartOption);
                myCompanyChart.resize();
            }
        });
    }
</script>
</body>

</html>